<template>
  <div>
    <div>
      <el-button type="primary" @click="dialogVisible = true">添加区域</el-button>
      <el-form ref="form" inline :model="form" label-width="130px">
        <el-dialog title="添加区域" :visible.sync="dialogVisible" width="35%">
          <el-form-item label="区域名称：" prop="areaName">
            <el-input v-model="form.areaName" placeholder="请输入区域名称" />
          </el-form-item>
          <el-form-item label="车位数(个):" prop="spaceNumber">
            <el-input v-model="form.spaceNumber" placeholder="请输入车位个数" />
          </el-form-item>
          <el-form-item label="面积(m²):" prop="areaProportion">
            <el-input v-model="form.areaProportion" placeholder="请输入面积(m²)" />
          </el-form-item>
          <el-form-item label="关联计费规则:" prop="propertyFeePrice">
            <el-dropdown trigger="click">
              <div class="div-span">
                <span style="display: block; text-align: center;">请选择</span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>按次计费</el-dropdown-item>
                <el-dropdown-item>按分钟计费</el-dropdown-item>
                <el-dropdown-item>按小时计费</el-dropdown-item>
                <el-dropdown-item>按分段计费</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary">确 定</el-button>
          </span>
        </el-dialog>
      </el-form>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="序号" />
      <el-table-column prop="ruleNumber" label="计费规则编号" width="180" />
      <el-table-column prop="ruleName" label="计费规则名称" />
      <el-table-column prop="freeDuration" label="免费时长(分钟)" />
      <el-table-column prop="chargeCeiling" label="收费上限(元)" />
      <el-table-column prop="chargeType" label="计费方式">
        <template v-slot="{ row }">
          <span v-if="row.chargeType === 'duration'">时长收费</span>
          <span v-else-if="row.chargeType === 'turn'">按次收费</span>
          <span v-else>分段收费</span>
        </template>
      </el-table-column>
      <el-table-column prop="ruleNameView" label="计费规则" width="300" />
      <el-table-column label="操作" width="150">
        <template>
          <el-button size="mini" type="text">编辑</el-button>
          <el-button size="mini" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getRuleList } from '@/api/billing'
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        areaName: '',
        areaProportion: '',
        hoverRuleName: '',
        id: '',
        remark: '',
        ruleId: '',
        ruleName: '',
        spaceNumber: ''
      },
      params: {
        name: '',
        page: 1,
        pageSize: 10
      },
      tableData: []
    }
  },
  created() {
    this.getRuleList()
  },
  methods: {
    async getRuleList() {
      const { rows } = await getRuleList()
      console.log(rows)
      this.tableData = rows
    }
  }
}
</script>
<style>
.div-span {
    border: 1px solid #d4cfcf;
    width: 188px
}
</style>
